<!-- 商品列表 -->
<template>
  <view class="container">
    <!-- 分类导航 -->
    <view class="category-nav">
      <view 
        class="nav-item" 
        :class="{active: activeCategory === 0}"
        @tap="changeCategory(0)"
      >
        <text>全部</text>
      </view>
      <view 
        class="nav-item" 
        v-for="category in categories" 
        :key="category.id"
        :class="{active: activeCategory === category.id}"
        @tap="changeCategory(category.id)"
      >
        <text>{{ category.name }}</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view 
        class="product-item" 
        v-for="product in filteredProducts" 
        :key="product.id"
        @tap="viewProductDetail(product)"
      >
        <image :src="product.imageUrl" mode="aspectFill" class="product-image"/>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-desc">{{ product.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import shuju from '../../../shuju.json';

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  details: string;
  craftsman: string;
  imageUrl: string;
  categoryId: number;
}

interface Category {
  id: number;
  name: string;
  icon: string;
}

const products = ref<Product[]>(shuju.featuredProducts);
const categories = ref<Category[]>(shuju.categories);
const activeCategory = ref(0); // 默认显示全部商品

// 根据分类ID过滤商品
const filteredProducts = computed(() => {
  if (activeCategory.value === 0) { // 全部商品
    return products.value;
  }
  return products.value.filter(product => product.categoryId === activeCategory.value);
});

// 切换分类
const changeCategory = (categoryId: number) => {
  activeCategory.value = categoryId;
};

// 查看商品详情 - 跳转到 first 页面并传递商品数据
const viewProductDetail = (product: Product) => {
  uni.navigateTo({
    url: `/pages/list01/first?product=${encodeURIComponent(JSON.stringify(product))}`
  });
};

onMounted(() => {
  console.log('商品数据加载完成:', products.value);
});
</script>

<style lang="scss">
/* 保持原有样式不变 */

.container {
  // padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.nav-item {
  padding: 12rpx 24rpx;
  margin: 5rpx;
  border-radius: 32rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 28rpx;
}

.nav-item.active {
  background-color: #ff4d4f;
  color: #fff;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.product-image {
  width: 240rpx;
  height: 240rpx;
  object-fit: cover;
}

.product-info {
  flex: 1;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.product-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>